<template>
  <div class="quote-confirm">
    <van-nav-bar
      :title="$t('repair.quote.title')"
      left-arrow
      @click-left="router.back()"
    />
    
    <div v-if="loading" class="loading-container">
      <van-loading size="24px">{{ $t('repair.common.loading') }}</van-loading>
    </div>
    
    <div v-else-if="quoteInfo" class="quote-content">
      <!-- 检测结果 -->
      <div class="section">
        <div class="section-title">{{ $t('repair.quote.detectionResult') }}</div>
        <van-cell-group inset>
          <van-cell :title="$t('repair.quote.faultCause')" :label="quoteInfo.faultCause" />
          <van-cell :title="$t('repair.quote.repairPlan')" :label="quoteInfo.repairPlan" />
        </van-cell-group>
      </div>
      
      <!-- 费用明细 -->
      <div class="section">
        <div class="section-title">{{ $t('repair.quote.costDetail') }}</div>
        <van-cell-group inset>
          <van-cell :title="$t('repair.quote.laborCost')" :value="`¥${quoteInfo.laborCost}`" />
          <van-cell :title="$t('repair.quote.partsCost')" :value="`¥${quoteInfo.partsCost}`" />
          <van-cell :title="$t('repair.quote.subtotal')" :value="`¥${quoteInfo.subtotal}`" />
          <van-cell :title="$t('repair.quote.discount')" :value="`-¥${quoteInfo.discount}`" value-class="discount-value" />
          <van-cell :title="$t('repair.quote.total')" :value="`¥${quoteInfo.totalAmount}`" value-class="total-value" />
        </van-cell-group>
      </div>
      
      <!-- 报价有效期 -->
      <div class="valid-period">
        <van-icon name="clock-o" />
        {{ $t('repair.quote.validPeriod') }}: 24{{ $t('repair.quote.hours') }}
      </div>
      
      <!-- 协议 -->
      <div class="agreement">
        <van-checkbox v-model="agreed">
          {{ $t('repair.quote.agreement') }}
        </van-checkbox>
      </div>
      
      <!-- 操作按钮 -->
      <div class="action-buttons">
        <van-button block @click="handleReject">
          {{ $t('repair.quote.rejectRepair') }}
        </van-button>
        <van-button type="primary" block :disabled="!agreed" @click="handleConfirm">
          {{ $t('repair.quote.confirmRepair') }}
        </van-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { showToast, showSuccessToast, showConfirmDialog } from 'vant'
import { getRepairOrderDetail, confirmQuote, rejectQuote } from '@/api/repair'

const route = useRoute()
const router = useRouter()
const { t } = useI18n()

const loading = ref(false)
const quoteInfo = ref(null)
const agreed = ref(false)

// 获取报价详情
const getQuoteDetail = async () => {
  loading.value = true
  try {
    const res = await getRepairOrderDetail(route.params.id)
    quoteInfo.value = res.data.quote
  } catch (error) {
    showToast('获取报价详情失败')
  } finally {
    loading.value = false
  }
}

// 确认报价
const handleConfirm = async () => {
  showConfirmDialog({
    title: t('repair.quote.confirmTitle'),
    message: t('repair.quote.confirmMessage')
  }).then(async () => {
    try {
      await confirmQuote(route.params.id, {})
      showSuccessToast(t('repair.quote.confirmSuccess'))
      setTimeout(() => {
        router.back()
      }, 1500)
    } catch (error) {
      showToast('确认失败')
    }
  })
}

// 拒绝报价
const handleReject = async () => {
  showConfirmDialog({
    title: t('repair.quote.rejectTitle'),
    message: t('repair.quote.rejectMessage')
  }).then(async () => {
    try {
      await rejectQuote(route.params.id, { reason: '价格不合适' })
      showSuccessToast(t('repair.quote.rejectSuccess'))
      setTimeout(() => {
        router.back()
      }, 1500)
    } catch (error) {
      showToast('操作失败')
    }
  })
}

onMounted(() => {
  getQuoteDetail()
})
</script>

<style scoped lang="scss">
.quote-confirm {
  min-height: 100vh;
  background: #f7f8fa;
  padding-bottom: 80px;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100px 0;
}

.quote-content {
  padding: 16px;
}

.section {
  margin-bottom: 16px;
}

.section-title {
  font-size: 15px;
  font-weight: 500;
  color: #323233;
  margin-bottom: 12px;
  padding: 0 16px;
}

.valid-period {
  background: #fff;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #ff976a;
}

.agreement {
  padding: 16px;
}

.action-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  background: #fff;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  gap: 12px;
  
  .van-button {
    flex: 1;
  }
}

:deep(.discount-value) {
  color: #07c160;
}

:deep(.total-value) {
  color: #ee0a24;
  font-size: 18px;
  font-weight: 500;
}
</style>

